<script setup lang="js">
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {Plus} from "@element-plus/icons-vue";
import {saveUpdatedUser, getCurrentUserInfo, getUserById} from "@/api/user";
import {ElMessage} from "element-plus";
import FavoriteListPage from "./FavoriteListPage.vue";
import ReviewListPage from "./ReviewListPage.vue";

// ----------初始化获取用户--------------------
const curUser = ref({})
const updateInfo = ref({})
const getCurUser = () => {
  getCurrentUserInfo().then(res => {
    getUserById(res.data.id).then(res => {
      curUser.value = res.data
      updateInfo.value = JSON.parse(JSON.stringify(curUser.value))
    })
  })
}
onMounted(() => {
  getCurUser()
})
// ---------------------------------------
// 编辑个人资料弹框
const dialogVisible = ref(false)
const imageUrl = ref('')
const openDialog = () => {
  dialogVisible.value = true
  imageUrl.value = curUser.value.avatarUrl
  updateInfo.value = JSON.parse(JSON.stringify(curUser.value))
}
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  updateInfo.value.avatarUrl = response.data.url
}
const updateUser = () => {
  dialogVisible.value = false
  saveUpdatedUser(updateInfo.value).then((res) => {
    if (res.data) {
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      curUser.value = {...curUser.value, ...updateInfo.value}
    } else {
      ElMessage({
        type: 'error',
        message: '修改失败',
      })
    }
  })
}
// ---------------------------------------------------
const activeName = ref('review')
const handleClick = (tab, event) => {
  if (tab.storeName === 'review') {
    // 处理评论标签点击
  } else if (tab.storeName === 'favorite') {
    // 处理收藏标签点击
  }
}
// ---------------------------------------------------
</script>

<template>
  <div class="profile-page">
    <!-- 个人信息 -->
    <div class="profile-card">
      <div class="profile-header">
        <div class="avatar-container">
          <el-image
              class="avatar"
              :src="curUser.avatarUrl"
              max-scale="2"
              min-scale="0.1"
              :preview-src-list="[curUser.avatarUrl]"
          />
        </div>

        <div class="profile-info">
          <h2 class="nickname">{{ curUser.nickname }}</h2>
          <p class="username" style="font-size: 14px">账号：{{curUser.username}}</p>
          <p class="user-signature">个性签名：{{ curUser.signature }}</p>
          <p class="user-gender">{{ curUser.gender === 1 ? '男' : curUser.gender === 2 ? '女' : ' 未知' }}</p>
        </div>
      </div>

      <!--  编辑个人信息   -->
      <button class="edit-profile-btn" @click="openDialog">
        <i class="fas fa-edit"></i> 编辑资料
      </button>
      <el-dialog
          v-model="dialogVisible"
          title="编辑用户"
          width="500"
      >
      <span>
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="/api/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
            <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="updateInfo.nickname"/>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input v-model="updateInfo.signature"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="updateInfo.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              v-model="updateInfo.birthday"
              type="date"
              placeholder="选择生日"
          />
        </el-form-item>
        <el-form-item label="隐私选项">
          <el-radio-group v-model="updateInfo.privacySettings">
            <el-radio :value="0">公开</el-radio>
            <el-radio :value="1">仅自己可见</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUser">修改</el-button>
          </div>
        </template>
      </el-dialog>
    </div>


    <!-- 评论、收藏  -->
    <el-tabs v-model="activeName" class="review-favorite-tab" @tab-click="handleClick">
      <el-tab-pane label="评论" name="review">
        <div>
          <ReviewListPage/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收藏" name="favorite">
        <div>
          <favorite-list-page/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
// 变量定义
$primary: #409EFF;
$primary-light: #e6f7ff;
$shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
$shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
$transition: all 0.3s ease;

// ---------------------个人信息页面整体样式----------------------------------
.profile-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 15px 80px;
}

// ---------------------个人信息卡片样式----------------------------------
.profile-card {
  background-color: white;
  padding: 30px 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: $shadow;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-hover;
  }
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

// 头像样式
.avatar-container {
  position: relative;
  margin-right: 25px;
  cursor: pointer;
  transition: $transition;

  &:hover {
    transform: scale(1.05);
  }

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid $primary-light;
    box-shadow: 0 5px 15px rgba(64, 158, 255, 0.15);
    transition: $transition;

    &:hover {
      transform: rotate(5deg);
      box-shadow: 0 8px 20px rgba(64, 158, 255, 0.2);
    }
  }
}

// 个人信息文字样式
.profile-info {
  flex: 1;
  padding: 10px 0;

  .nickname {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #333;
    display: flex;
    align-items: center;

    &::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: $primary;
      border-radius: 50%;
      margin-left: 10px;
      opacity: 0.7;
    }
  }

  .user-signature {
    font-size: 16px;
    color: #666;
    margin: 0 0 18px 0;
    line-height: 1.6;
    max-width: 600px;
    padding-left: 2px;
  }

  .user-gender {
    font-size: 15px;
    color: #888;
    margin: 0;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    width: fit-content;
  }
}

// 编辑按钮样式
.edit-profile-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid $primary;
  border-radius: 8px;
  background-color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: $primary;
  transition: $transition;

  &:hover {
    background-color: $primary;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }

  i {
    font-size: 18px;
  }
}

// ---------------------编辑弹窗样式----------------------------------
::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: $shadow;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-hover;
  }
}

::v-deep .el-dialog__header {
  background-color: $primary-light;
  padding: 18px 20px;

  .el-dialog__title {
    font-size: 19px;
    color: $primary;
    font-weight: 600;
  }
}

::v-deep .el-dialog__body {
  padding: 25px 20px;
}

::v-deep .el-form {
  gap: 15px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;

  label {
    font-size: 15px;
    color: #555;
    font-weight: 500;
  }

  .el-input__inner, .el-date-picker__input, .el-radio {
    font-size: 15px;
    padding: 10px 12px;
  }
}

// 头像上传样式
.avatar-uploader .avatar {
  width: 180px;
  height: 180px;
  display: block;
  border-radius: 8px;
  transition: $transition;

  &:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed $primary;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: $transition;

  &:hover {
    border-color: $primary;
    background-color: $primary-light;
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 30px;
  color: $primary;
  width: 180px;
  height: 180px;
  text-align: center;
  line-height: 180px;
}

::v-deep .dialog-footer {
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;

  .el-button {
    padding: 8px 20px;
    font-size: 15px;
    border-radius: 6px;
    transition: $transition;

    &:hover {
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .el-button--primary {
    background-color: $primary;
    border-color: $primary;
  }
}

// ---------------------标签页样式----------------------------------
.review-favorite-tab {
  background-color: transparent;
  margin-top: 5px;

  ::v-deep .el-tabs__nav {
    padding: 0 20px;
    background-color: white;
    border-radius: 8px 8px 0 0;
  }

  ::v-deep .el-tabs__item {
    font-size: 17px;
    padding: 0 25px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
    transition: $transition;

    &:hover {
      color: $primary;
      transform: translateY(-2px);
    }

    &.is-active {
      color: $primary;
      font-weight: 600;
      border-bottom: 3px solid $primary;
    }
  }

  ::v-deep .el-tabs__content {
    margin-top: 0;
  }

  ::v-deep .el-tab-pane {
    padding: 25px;
    background-color: white;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-height: 400px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .avatar-container {
    margin-right: 0;
  }

  .profile-info {
    width: 100%;
    padding: 0;
  }

  .user-signature {
    max-width: 100%;
  }

  .review-favorite-tab ::v-deep .el-tab-pane {
    padding: 15px;
    min-height: 300px;
  }

  .review-favorite-tab ::v-deep .el-tabs__item {
    font-size: 15px;
    padding: 0 18px;
  }
}
</style>